<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
	<link type="text/css" rel="stylesheet" href="css/login.css" />
</h:head>
<h:body>
	<h:form id="form" class="loginForm">
		<div class="loginDiv">
			<p:growl id="msg" showDetail="true" life="3000" />
			<table>
				<colgroup>
					<col style="width: 60px" />
					<col style="width: auto" />
				</colgroup>

				<tr>
					<td><img class="loginImg" src="img/User.png" title="Login Name" /></td>
					<td><p:inputText styleClass="loginField" id="nickField" value="#{credentials.nickName}"></p:inputText></td>
				</tr>
				<tr>
					<td><img class="loginImg" style="margin-top: 10px" src="img/Key.png" title="Login Password" /></td>
					<td><p:password styleClass="loginField" id="passField" value="#{credentials.password}" feedback="false" required="true" requiredMessage="#{bundle['required']}"></p:password></td>
				</tr>

			</table>
			<p:commandButton value="" title="Login" styleClass="commandButtonImage" style="margin-right:8%;background-image: url('img/Enter.png')" action="#{loginController.login}"></p:commandButton>
			<p:commandButton value="" title="Register" styleClass="commandButtonImage" style="margin-right:0%;background-image: url('img/Register.png')" action="#{loginController.register}"></p:commandButton>
		</div>
		<p:commandButton styleClass="loginBtn" title="Register" action="#{loginController.logout}" value="Logout" ajax="true" update="form"></p:commandButton>
	</h:form>

	<span id="logo">CollectABase</span>
</h:body>
</html>